﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery滚动tab选项卡-jq22.com</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
.tabs {
	width:1200px;
	margin:0 auto;
	height:336px;
	overflow:hidden;
}
.tabs_item {
	height:36px;
}
.tabs_block {
	height:300px;
}
.list_item {
	float:left;
	width:200px;
	height:36px;
	line-height:36px;
	font-size:26px;
	text-align:center;
	background-color:#FC0;
	cursor:pointer;
}
.list_item.active {
	color:#FFF;
	background-color:#F60
}
.tabs_block {
	width:20000px;
	position:relative;
}
.list_block {
	display:none;
	float:left;
	width:1200px;
	height:300px;
	font-size:100px;
	text-align:center;
	line-height:300px;
	background-color:#F4F4F4
}
.list_block.show {
	display:block;
}
</style>
</head>
<body>
<div class="tabs">
    <div class="tabs_item">
        <div class="list_item">list item 1</div>
        <div class="list_item">list item 2</div>
        <div class="list_item">list item 3</div>
        <div class="list_item">list item 4</div>
        <div class="list_item">list item 5</div>
        <div class="list_item">list item 6</div>
    </div>
    <div class="clear"> </div>
    <div class="tabs_block">
        <div class="list_block">list block 1</div>
        <div class="list_block">list block 2</div>
        <div class="list_block">list block 3</div>
        <div class="list_block">list block 4</div>
        <div class="list_block">list block 5</div>
        <div class="list_block">list block 6</div>
    </div>
</div>

<script>
jQuery.easing['easeOutCubic'] = function(x, t, b, c, d) {
    return c * ((t = t / d - 1) * t * t + 1) + b;
};

function Tabs(tabs, list, block, item, $) {
    var tabs = $(tabs);
    var width = tabs.width();
    tabs.find(list + ':first').addClass('active');
    tabs.find(item + ':first').addClass('show');
    tabs.find(list).click(function() {
        var $this = $(this);
        var i = tabs.find(block).find('.show').index();
        var n = $this.index();
        $this.addClass('active').siblings('.active').removeClass('active');
        tabs.find(item).eq(n).addClass('show');
        if (n > i) {
            tabs.find(block).stop().animate({
                'left': '-' + width + 'px'
            }, 600, 'easeOutCubic', function() {
                tabs.find(block).css('left', '0px');
                tabs.find(item).eq(n).siblings('.show').removeClass('show');
            });
        } else {
            tabs.find(block).css('left', '-' + width + 'px').stop().animate({
                'left': 0
            }, 600, 'easeOutCubic', function() {
                tabs.find(item).eq(n).siblings('.show').removeClass('show');
            });
        }
    });
};
jQuery(document).ready(function() {
    var myTabs = new Tabs('.tabs', '.list_item', '.tabs_block', '.list_block', jQuery);
});
</script>

</body>
</html>
